<template>
  <div class="box mykind">
   <van-nav-bar  >
  <template #title >
    <van-search
  v-model="value"
  :disabled="true"
  input-align="center"
  @click="$router.push('/search')"
/>
  </template>
</van-nav-bar>
    <div class="my-cont">
    <van-sidebar v-model="activeKey" @change="onChange" >
      <van-sidebar-item v-for="i in bigList2" :title="i" :key="i"  />
    </van-sidebar>
    <div class="right-cont" ref="setScroll">
      <div class="rightSmallwrasp">
      <div class="rightSmall">
        <button @click="onSort(0)">销量</button>
        <button @click="onSort(1)">价格</button>
        <button @click="onSort(2)">默认</button>
      </div>
      </div>
      <router-link v-for="abc in renderList" :key="abc.proId"
       :to="'/detail/'+abc.proId" >
      <van-card
        :desc="abc.proname"
        :price="abc.beforePri + '0'"
        :thumb="abc.img"
      >
      <template #tags>
        <van-tag color="#ffe1e1" text-color="#ad0000">已售 {{abc.sales}}</van-tag>
      </template>
      </van-card>
      </router-link>
    </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Search, Tab, Tabs, Image as VanImage, Grid, GridItem, Card, Sidebar, SidebarItem, DropdownMenu, DropdownItem, Icon, Tag, Sticky } from 'vant'
import { getKind, getbrand } from '@/api/request.js'

Vue.use(NavBar)
Vue.use(Search)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(VanImage)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Card)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Sidebar)
Vue.use(SidebarItem)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Icon)
Vue.use(Tag)
Vue.use(Sticky)
export default {
  data () {
    return {
      value: '西梅',
      bigList2: [],
      bigList3: [],
      active: 0,
      hehe: 1,
      activeKey: 0,
      value2: 0,
      option2: [
        { text: '默认', value: 2 },
        { text: '价格', value: 1 },
        { text: '销量', value: 0 }
      ],
      renderList: [],
      red: document.getElementsByTagName('button'),
      red2: 'pink'
    }
  },
  methods: {
    onChange (a) {
      this.$refs.setScroll.scrollTop = 0
      getbrand({
        kind: this.bigList2[a]
      }).then(data => {
        // console.log(data.data.msg)
        this.bigList3 = data.data.msg
        this.renderList = [...this.bigList3]
        this.onSort(this.value2)
      })
    },
    onSort (s) {
      for (var i = 0; i < this.red.length; i++) {
        this.red[i].style.color = ''
      }
      this.red[s].style.color = this.red2
      this.$refs.setScroll.scrollTop = 0
      switch (s) {
        case 2:
          this.value2 = s
          this.renderList = [...this.bigList3]
          break
        case 1:
          this.value2 = s
          this.renderList = [...this.bigList3]
          this.renderList.sort((a, b) => {
            return a.beforePri - b.beforePri
          })
          break
        case 0:
          this.value2 = s
          this.renderList = [...this.bigList3]
          this.renderList.sort((a, b) => {
            return b.sales - a.sales
          })
          break
      }
    }
  },
  mounted () {
    this.red[2].style.color = this.red2
    getKind().then(data => {
      this.bigList2 = data.data.data
      getbrand({
        kind: this.bigList2[this.activeKey]
      }).then(data => {
        this.bigList3 = data.data.msg
        this.renderList = [...this.bigList3]
      })
    })
  }
}
</script>
<style lang="scss">
.mykind{
    display:flex;
    flex-direction: column;
    flex:1;
    overflow: auto;
    height:0.21rem !important;
  .van-nav-bar__title   {
    max-width: 100%;
    width:100vw;
    border-radius: 0.8px;
  }
  .van-field__left-icon {
      margin-right: -132px;
  }
  .van-search .van-cell {
      padding: 5px 8px 5px 146px;
  }
  .van-search{
    padding: 0.1rem 0.12rem;
  }
  .van-nav-bar{
    &::after{
      border:none;
    }
  }
  .van-search__content{
      border-radius: 14px;
  }
  .van-tabs--line .van-tabs__wrap {
    height: 77px
  }
  .van-grid-item__content{
    width:0.7rem;
  }
  .my-cont{
    display:flex;
    flex:1;
    overflow: auto;
    .van-sidebar{
      overflow: auto;
      width: 0.85rem;
      padding-top: 0.26rem;
      .van-sidebar-item{
      height:0.8rem;
      font-size: 0.15rem;
      line-height: 40px;
    }
    }
    .van-card__thumb {
      margin:0 0.23rem 0 0.2rem
    }
  }
  .van-card{
    padding: 0;
    height: 0.9rem;
    width:2.9rem;
    background: none;
    .van-card__header{
      padding: 0.1rem 0.1rem 0.15rem 0.02rem;
      .van-card__price-integer{
      font-size: 0.21rem;
      }
      .van-card__thumb{
      height: 0.68rem;
      }
      .van-card__content{
        min-height: 0.6rem;
        .van-card__desc{
          font-weight:600;
          font-size: 0.14rem;
        }
      }
      .van-card__price{
        color:hotpink
      }
    }
  }
  .right-cont{
    overflow: auto;
    .rightSmall{
    padding-top:0.05rem
    }
  }
  .van-image__img{
    width: 0.8rem;
    height: 0.8rem;
  }
  .van-popup--top {
    left: 85px;
    width: 290px;
  }
  .van-dropdown-menu__bar{
    height:0.15rem;
    box-shadow:none;
    .van-dropdown-menu__title{
      left:0.9rem
    }
    .van-dropdown-menu__title{
    font-size: 12px;
    }
  }
  .van-popup--top{
    &::after{
      border:none;
    }
  }
  .rightSmallwrasp{
    height:0.21rem
  }
  .rightSmall{
      position: fixed;
      z-index: 5;
      height:0.21rem !important;
      background: white;
      right: 0px;
      width: 100vw;
    button{
      border:none;
      height: 0.12rem;
      font-size: 0.12rem;
      background: none;
      float: right;
      // width: 0.9rem;
    }
  }
  .active{
    color:black;
  }
}
</style>
